<script>
	import HeaderNav from '@/components/HeaderNav.vue'
	import TaskContainer from '@/components/TaskContainer.vue'
	import TaskItem from '@/components/TaskItem.vue' 
	import Condition from '@/components/Condition.vue'
	export default {
		components: {
			HeaderNav,
			TaskItem, 
			TaskContainer,
			Condition ,
		},
		data() {
			return {
				pagination: {
					page: 1, 
					rows: 20, 
				},
				condition: {} , // 查询条件
				conditionList: [
					{
						name: "任务阶段" ,
						value: 'stage',  // 查询条件对应的键
						list: [
							{id: 1, name: "第一阶段"},
							{id: 2, name: "第二阶段"},
							{id: 3, name: "第三阶段"},
							{id: 4, name: "第四阶段"},
							{id: 5, name: "第五阶段"}
						],
					},
					{
						name: "难易程度" ,
						value: 'leave',  // 查询条件对应的键
						list: [
							{id: "简单题", name: "简单题"},
							{id: "中等题", name: "中等题"},
							{id: "难题", name: "难题"},
							{id: "选做题", name: "选做题"},
						],
						multi: true, // 支持多选
					},
					{
						name: "任务状态" ,
						value: 'status',  // 查询条件对应的键
						list: [
							{id: 0, name: "未开始"},
							{id: 1, name: "进行中"},
							{id: 2, name: "需讲解"},
							{id: 3, name: "已提交"},
							{id: 4, name: "已检查"},
							{id: -1, name: "异常题"},
							{id: 5, name: "已完成"},
						],
						multi: true, // 支持多选
					}
				]
			}
		}
	}
</script>

<template>
  <main>
	  <!-- 系统导航 -->
	 <HeaderNav active-index="0"></HeaderNav>
	 
	 <!-- 搜索条件 -->
	 <Condition :conditionList="conditionList" v-model="condition"></Condition>
	 
	 <!-- 任务列表 -->
	 <TaskContainer>
		 <template #search="{ condition }">
			 <el-input
			   v-model="condition.search" size="large"
			   placeholder="请输入搜索的任务关键词">
			   <template #prefix>
				 <el-icon class="el-input__icon"><search /></el-icon>
			   </template>
			 </el-input>
		 </template>
		 <!-- 显示单个任务列表 -->
		 <TaskItem v-for="n in 20" :id="1" :leave="1" :stage="1" title="测试任务" 
					:status="1" module-name="java基础" />
		 
		<!-- 添加分页插件 -->
		<div style="margin: 20px 0;">
		  <el-pagination background layout="prev, pager, next"
				hide-on-single-page
			   :page-size="pagination.rows"
		       :pager-count="11"
			   v-model:current-page="pagination.page"
			   :total="1000" />
		</div>
	 </TaskContainer>
	 
  </main>
</template>

